<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{getLangText(label.tooltip)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.tooltip)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="tooltip.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.trigger)}}</label>
					<md-select v-model="tooltip.trigger">
						<md-option :key="item.en" :value="item.en" v-for="item in trigger">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.bg)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:tooltip.backgroundColor}"
							@click="showColorPicker('backgroundColor')"
						></span>
						{{tooltip.backgroundColor}}
					</span>
				</div>
				<color-picker
					:lang-type="langType"
					:rgba="tooltip.backgroundColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='backgroundColor'"
				></color-picker>

				<md-field>
					<label>{{getLangText(label.borderWidth)}}</label>
					<md-input v-model="tooltip.borderWidth"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.borderColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:tooltip.borderColor}"
							@click="showColorPicker('borderColor')"
						></span>
						{{tooltip.borderColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="tooltip.borderColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='borderColor'"
				></color-picker>

				<div class="table-row-item">
					<span>{{getLangText(label.showContent)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="tooltip.showContent"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<div class="table-row-item">
					<span>{{getLangText(label.alwaysShowContent)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="tooltip.alwaysShowContent"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<div class="table-row-item">
					<span>{{getLangText(label.confine)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="tooltip.confine"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>

				<!-- <div style="display:flex;">
					<md-field style="width:135px;display:inline-flex;">
						<label>{{getLangText(label.position)}}X</label>
						<md-input v-model="tooltip.position[0]"></md-input>
					</md-field>
					<md-field style="width:135px;display:inline-flex;margin-left:8px;">
						<label>{{getLangText(label.position)}}Y</label>
						<md-input v-model="tooltip.position[1]"></md-input>
					</md-field>
				</div>-->

				<md-field>
					<label>{{getLangText(label.padding)}}</label>
					<md-input v-model="tooltip.padding"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.axisPointer)}}{{getLangText(label.type)}}</label>
					<md-select v-model="tooltip.axisPointer.type">
						<md-option :key="item.en" :value="item.en" v-for="item in pointerType">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.axisPointer)}}{{getLangText(label.snap)}}</label>
					<md-select v-model="tooltip.axisPointer.snap">
						<md-option :key="item.en" :value="item.en" v-for="item in pointerSnap">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<!--

				-->
				<md-card style="white-space:normal;margin:8px 0;">
					<md-card-content>
						<div v-html="getLangText(label.formatterTip)"></div>
					</md-card-content>
				</md-card>
				<md-field>
					<label>{{getLangText(label.formatter)}}</label>
					<md-textarea v-model="tooltip.formatter"></md-textarea>
				</md-field>
			</div>
			<text-style :lang-type="langType" @text-style-result="onTextStyle" :option="tooltip.textStyle"></text-style>
			<line-style
				:lang-type="langType"
				@line-style-result="onPointerLineStyle"
				:line-name="getLangText(label.axisPointer)"
				:option="tooltip.axisPointer.lineStyle"
			></line-style>
			<label-style
				:lang-type="langType"
				@label-style-result="onPointerLabelStyle"
				:label-name="getLangText(label.axisPointer)"
				:option="tooltip.axisPointer.label"
			></label-style>
			<line-style
				:lang-type="langType"
				@line-style-result="onPointerCrossStyle"
				:line-name="getLangText(label.axisPointer)+getLangText(label.cross)"
				:option="tooltip.axisPointer.crossStyle"
			></line-style>
			<area-style
				:lang-type="langType"
				@area-style-result="onPointerAreaStyle"
				:area-name="getLangText(label.axisPointer)+getLangText(label.shadow)"
				:option="tooltip.axisPointer.shadowStyle"
			></area-style>
		</div>
	</div>
</template>
<script>
	import ColorPicker from "@/components/comp/ColorPicker";
	import TextStyle from "@/components/comp/TextStyle";
	import LabelStyle from "@/components/comp/LabelStyle";
	import LineStyle from "@/components/comp/LineStyle";
	import AreaStyle from "@/components/comp/AreaStyle";
	export default {
		name: "ToolTip",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		components: {
			"text-style": TextStyle,
			"color-picker": ColorPicker,
			"line-style": LineStyle,
			"label-style": LabelStyle,
			"area-style": AreaStyle
		},
		data: () => ({
			label: {
				tooltip: { zh: "提示框", en: "ToolTip" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				trigger: { zh: "触发类型", en: "trigger" },
				axisPointer: { zh: "指示器", en: " axisPointer" },
				type: { zh: "类型", en: " type" },
				snap: { zh: "吸附到点", en: " snap" },

				bg: { zh: "背景颜色", en: "bgColor" },
				borderColor: { zh: "边框颜色", en: "borderColor" },
				borderWidth: { zh: "边框线宽", en: "borderWidth" },
				showContent: { zh: "提示框浮层显示", en: "showContent" },
				alwaysShowContent: { zh: "提示框内容一直显示", en: "alwaysShowContent" },
				confine: { zh: "限制在图表内", en: "confine" },
				position: { zh: "位置", en: "position" },
				padding: { zh: "内边距", en: "padding" },
				cross: { zh: "交叉", en: "cross " },
				shadow: { zh: "阴影", en: " shadow" },
				formatter: { zh: "模板", en: "formatter" },
				formatterTip:{zh:'<p><span style="font-weight:bold;">折线图、柱状图:</span>{a}(系列名称),{b}(类目值),{c}(数值),{d}(无)</p>'+
						'<p><span style="font-weight:bold;">散点图:</span>{a}(系列名称),{b}(数据名称),{c}(数值数组),{d}(无)</p>'+
						'<p><span style="font-weight:bold;">地图:</span>{a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)</p>'+
						'<p><span style="font-weight:bold;">饼图、仪表盘、漏斗图:</span>{a}(系列名称),{b}(数据项名称),{c}(数值),{d}(百分比)</p>',
						en:'<p><span style="font-weight:bold;">line、bar:</span>{a}(series),{b}(category),{c}(value),{d}(none)</p>'+
						'<p><span style="font-weight:bold;">scatter:</span>{a}(series),{b}(dataName),{c}(value),{d}(none)</p>'+
						'<p><span style="font-weight:bold;">map:</span>{a}(series),{b}(areaName),{c}(mergeValue), {d}(none)</p>'+
						'<p><span style="font-weight:bold;">pie、gauge、funnel:</span>{a}(series),{b}(itemName),{c}(value),{d}(percentage)</p>'}
			},
			isShow: false,
			trigger: [
				{ zh: "数据项", en: "item" },
				{ zh: "坐标轴", en: "axis" },
				{ zh: "无", en: "none" }
			],
			pointerType: [
				{ zh: "直线", en: "line" },
				{ zh: "阴影", en: "shadow" },
				{ zh: "十字准星", en: "cross" },
				{ zh: "无", en: "none" }
			],
			pointerSnap: [
				{ zh: "自动", en: "auto" },
				{ zh: "是", en: true },
				{ zh: "否", en: false }
			],

			tooltip: {
				show: true,
				trigger: "item",
				backgroundColor: "rgba(50,50,50,0.7)",
				borderColor: "#333",
				borderWidth: 0,
				showContent: true,
				alwaysShowContent: false,
				confine: false,
				// position: [0, 0],
				padding: 5,
				formatter: "",
				axisPointer: {
					type: "line",
					snap: "auto",
					label: {},
					crossStyle: {},
					shadowStyle: {},
					lineStyle: {}
				}
			},
			picker: {
				show: false,
				current: ""
			},
			originOption: "",
			isParse:false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				} else {
					this.picker.show = false;
				}
			},
			tooltip:{
				deep:true,
				handler(){
					if(this.isShow&&!this.isParse)
					this.$emit("tooltip-result", JSON.parse(JSON.stringify([this.tooltip])));
				}
			}
		},
		methods: {
			onTextStyle(result) {
				this.tooltip.tooltip = result;
			},
			onPointerLineStyle(result) {
				this.tooltip.axisPointer.lineStyle = result;
			},
			onPointerLabelStyle(result) {
				this.tooltip.axisPointer.label = result;
			},
			onPointerCrossStyle(result) {
				this.tooltip.axisPointer.crossStyle = result;
			},
			onPointerAreaStyle(result) {
				this.tooltip.axisPointer.shadowStyle = result;
			},
			showColorPicker(tag) {
				if (tag != this.picker.current || !this.picker.show) {
					this.picker.current = tag;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker(op) {
				if (this.picker.current) this.tooltip[this.picker.current] = op.rgba;
			},
			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("tooltip-result", [this.tooltip]);
				}
			},
			parseObj() {
				if (this.option instanceof Array && this.option.length == 1) {
					this.isParse=true;
					var option = this.option[0];
					for (var key in option) {
						this.tooltip[key] = option[key];
					}
					this.originOption = JSON.stringify(this.tooltip);
					var that=this;
					setTimeout(() => {
						that.isParse=false;
					}, 100);
				}
			},
			colseOption() {
				this.isShow = false;
				var that=this;
				if (this.originOption != JSON.stringify(this.tooltip)) {
					setTimeout(() => {
						that.$emit("tooltip-result", JSON.parse(JSON.stringify([that.tooltip])));
					}, 50);
					
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
	};
</script>
<style lang="scss" scoped>
	.md-field + .md-has-textarea:not(.md-autogrow) {
		margin-top: 8px;
	}
</style>

